<template>
	<div>
		<el-input
			placeholder="搜索成员"
			size="small"
			v-model="searchInput"
			suffix-icon="el-icon-search"
			@input="inputchange"
		>
		</el-input>
		<div v-loading="loading" class="search-list">
			<el-checkbox-group v-model="selectItems" @change="changeCheckout">
				<el-checkbox
					v-if="item.show"
					v-for="(item, i) in list"
					:key="i"
					:label="item"
					:disabled="item.disabled"
					class="colleagues-list"
				>
					<div
						v-photo="item"
						v-lazy:background-image="
							$options.filters.filterUserLazyImg(item.img)
						"
						class="div-photo search-img"
					></div>
					<span>{{ item.realname }}</span>
				</el-checkbox>
			</el-checkbox-group>
		</div>
	</div>
</template>
<script type="text/javascript">
import { usersList } from '@/api/common'

export default {
	name: 'xh-user', // 新建 user
	components: {},
	computed: {},
	watch: {
		selectedData: function(value) {
			this.checkItems(value)
		}
	},
	data() {
		return {
			list: [],
			selectItems: [], // 选择项
			loading: false, // 加载动画
			searchInput: ''
		}
	},
	props: {
		value: {
			type: String,
			default: ''
		},
		/** 多选框 只能选一个 */
		radio: {
			type: Boolean,
			default: false
		},
		/** 已选信息 */
		selectedData: {
			type: Array,
			default: () => {
				return []
			}
		},
		/** 获取不同的员工展示列表 */
		infoType: {
			type: String,
			default: 'default' //返回全部  crm_contract crm_receivables oa_examine 保单审核人自选列表
		},
		/** 请求辅助参数 */
		infoParams: {
			type: Object,
			default: () => {
				return {}
			}
		}
	},
	mounted() {
		this.getUserList()
	},
	methods: {
		// 获取员工列表
		getUserList() {
			this.loading = true
			this.getRequest()(this.getParams())
				.then((res) => {
					var self = this
					this.list = res.data.map(function(item, index, array) {
						item.disabled = false // 要求单选
						item.show = true
						if (self.selectedData.length > 0) {
							let disabled = true
							for (let index = 0; index < self.selectedData.length; index++) {
								const element = self.selectedData[index]
								if (element.userId == item.userId) {
									disabled = false
									self.selectItems.push(item)
								}
							}
							if (self.radio) {
								item.disabled = disabled
							}
						}
						return item
					})
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		getRequest() {
			if (this.infoType === 'default') {
				return usersList
			} else if (
				this.infoType === 'crm_contract' ||
				this.infoType === 'crm_receivables' ||
				this.infoType === 'oa_examine'
			) {
				return usersList
			}
		},
		getParams() {
			let params =
				this.infoParams && Object.keys(this.infoParams.length !== 0)
					? this.infoParams
					: {}
			if (this.infoType === 'default') {
				params.pageType = 0
				return params
			} else if (
				this.infoType === 'crm_contract' ||
				this.infoType === 'crm_receivables' ||
				this.infoType === 'oa_examine'
			) {
				params.pageType = 0
				return params
			}
		},
		changeCheckout(items) {
			if (this.radio) {
				if (items.length) {
					var element = items[0]
					this.list = this.list.map(function(item, index, array) {
						if (element.userId == item.userId) {
							item.disabled = false
						} else {
							item.disabled = true
						}
						return item
					})
				} else {
					this.list = this.list.map(function(item, index, array) {
						item.disabled = false
						return item
					})
				}
			}

			this.$emit('changeCheckout', { data: this.selectItems })
		},
		/** 取消勾选 */
		cancelCheckItem(item) {
			var removeIndex = -1
			for (let index = 0; index < this.selectItems.length; index++) {
				const element = this.selectItems[index]
				if (element.userId == item.userId) {
					removeIndex = index
				}
			}
			this.selectItems.splice(removeIndex, 1)
			if (this.radio && this.selectItems.length == 0) {
				this.list = this.list.map(function(item, index, array) {
					item.disabled = false
					return item
				})
			}
		},
		/** 标记勾选 */
		checkItems(items) {
			this.selectItems = []
			if (items.length > 0) {
				for (let bigIndex = 0; bigIndex < this.list.length; bigIndex++) {
					const item = this.list[bigIndex]

					let disabled = true
					for (let index = 0; index < items.length; index++) {
						const element = items[index]
						if (element.userId == item.userId) {
							disabled = false
							this.selectItems.push(item)
						}
					}
					if (this.radio) {
						item.disabled = disabled
					}
				}
			}
		},
		// 搜索
		inputchange(val) {
			this.list = this.list.map(function(item, index, array) {
				if (item.realname.indexOf(val) != -1) {
					item.show = true
				} else {
					item.show = false
				}
				return item
			})
		}
	}
}
</script>
<style lang="scss" scoped>
/* 选择员工 */
.search-img {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	vertical-align: middle;
	margin-right: 8px;
}
.search-list {
	padding: 5px;
	height: 248px;
	overflow: auto;
}
.colleagues-list {
	padding: 5px;
	display: block;
	margin-left: 0;
}
</style>
